<template>
    <div class="digitalAssistantContainer h-full flex flex-col">
        <div class="digitalAssistantHeader">
            <el-input :input-style="{
                height: '41px',
                border: 'none',
                borderRadius: '8px 8px 8px 8px',
                fontFamily: 'PingFang SC, PingFang SC',
                fontWeight: '400',
                fontSize: '12px',
                color: '#616772',
                lineHeight: '19px'
            }" :suffix-icon="Search" v-model="queryParams.keyword" @input="getLists"></el-input>
        </div>
        <div class="digitalAssistantTitle">
            <img :src="DiditalAssistantIcon" class="w-[24px] h-[24px]" />
            <div class="digitalAssistantTitleText">我的AI助手</div>
        </div>
        <div class="flex-1">
            <ElScrollbar>
                <div class="flex flex-wrap">
                    <div class="addDigitalAssistantItem item">
                        <img @click="open(null)" :src="AddDiditalAssistant" class="digitalAssistantItemImage" />
                        <div class="addDigitalAssistantItemText">
                            新建数字助手
                        </div>
                    </div>
                    <div v-for="item in pager.lists" :key="item.id" class="digitalAssistantItem item">
                        <div class="digitalAssistantItemContent">
                            <img :src="item.image" class="w-[40px] h-[40px] mr-[10px]" />
                            <div class="digitalAssistantItemContentTitle">
                                {{ item.name }}
                            </div>
                        </div>
                        <div class="digitalAssistantItemDivide"></div>
                        <div class="digitalAssistantItemFooter">
                            <NuxtLink :to="'/create/produce?id=' + item.id">
                                <div class="digitalAssistantItemFooterButton">
                                    <div>
                                        <img :src="DigitalAssistantChat" class="w-[16px] h-[16px]" />
                                    </div>
                                    <div class="ml-[2px]">对话</div>
                                </div>
                            </NuxtLink>
                            <div class="itemFooterDivideLine"></div>
                            <div class="digitalAssistantItemFooterButton" @click="open(item.id)">
                                <div>
                                    <img :src="DigitalAssistantSetting" class="w-[16px] h-[16px]" />
                                </div>
                                <div class="ml-[2px]">设定</div>
                            </div>
                            <div class="itemFooterDivideLine"></div>
                            <div class="digitalAssistantItemFooterButton" @click="onDel(item.id)">
                                <div>
                                    <img :src="DeleteDiditalAssistant" class="w-[16px] h-[16px]" />
                                </div>
                                <div class="ml-[2px]">删除</div>
                            </div>
                        </div>
                    </div>
                </div>
            </ElScrollbar>
        </div>
        <div class="flex justify-end mt-4 mb-[10px] px-[16px]">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <Dialog @submit="onSubmit" v-if="dialogVisiable" ref="dialog" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Dialog from './components/dialog.vue'
import AddDiditalAssistant from '~/assets/images/add_digital_assistant.png'
import DiditalAssistantIcon from '~/assets/images/digital_assistant.png'
import DigitalAssistantChat from '~/assets/images/digital_assistant_chat.png'
import DigitalAssistantSetting from '~/assets/images/digital_assistant_setting.png'
import DeleteDiditalAssistant from '~/assets/images/delete_digital_assistant.png'
import { myList, addMyai, getMyai, delMyai } from '~/api/myai'
const queryParams = reactive({
    keyword: ''
})

const { pager, getLists, resetPage } = usePaging({
    size: 30,
    fetchFun: myList,
    params: queryParams
})
const settingMethod = ref('commonSetting')
const dialog = ref()
const open = async (id: any) => {
    dialogVisiable.value = true
    await nextTick()
    dialog.value.open(id)
}

const onSubmit = () => {
    dialogVisiable.value = false
    getLists()
}

const onDel = async (id: any) => {
    try {
        const confirm = await feedback.confirm('确定删除？')
        if (confirm === 'cancel') return
        await delMyai({ ids: [id] })
        feedback.msgSuccess('删除成功')
        getLists()
    } catch (error) { }
}
getLists()
const dialogVisiable = ref<boolean>(false)
const type = ref('add')
const setting = ref({} as any)
const createSetting = () => {
    type.value = 'add'
    setting.value = {}
    dialogVisiable.value = true
}
const editSetting = (item: any) => {
    type.value = 'edit'
    setting.value = item
    dialogVisiable.value = true
}
const deleteSetting = (item: any) => {
    console.log(item.id)
}
const closeDialog = () => {
    dialogVisiable.value = false
}
</script>
<style lang="scss" scoped>
.digitalAssistantContainer {
    width: 1680px;
    background: #262932;
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: 8px 8px 8px 8px;

    .digitalAssistantHeader {
        :deep(.el-input__wrapper) {
            background-color: #363a46 !important;
            border-color: #363a46 !important;
        }
    }

    .digitalAssistantTitle {
        margin-top: 20px;
        display: flex;
        align-items: center;

        .digitalAssistantTitleText {
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .item {
        margin-right: 16px;
        margin-bottom: 16px;

        &:nth-child(4n) {
            margin-right: 0;
        }
    }

    .addDigitalAssistantItem {
        width: 400px;
        height: 146px;
        background: #363a46;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .digitalAssistantItemImage {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border: 2px dashed rgb(136, 136, 136);
        }

        .addDigitalAssistantItemText {
            margin-top: 15px;
            height: 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            line-height: 19px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .digitalAssistantItem {
        width: 400px;
        height: 146px;
        background: #363a46;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        flex-direction: column;

        .digitalAssistantItemContent {
            margin-left: 10px;
            display: flex;
            align-items: center;
            flex: 1;

            .digitalAssistantItemContentTitle {
                height: 22px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #ffffff;
                line-height: 19px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .digitalAssistantItemDivide {
            width: 370px;
            margin: 0 auto;
            height: 0px;
            border: 1px solid #595c61;
        }

        .digitalAssistantItemFooter {
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .digitalAssistantItemFooterButton {
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;

                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8b8e92;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .itemFooterDivideLine {
                height: 20px;
                width: 0px;
                border: 1px solid #595c61;
            }
        }
    }

    :deep(.el-dialog) {
        background: #363a46;
    }

    .addDigitalAssistantDialog {
        width: 600px;
        height: 625px;
        border-radius: 6px 6px 6px 6px;

        .addDigitalAssistantDialogHeader {
            // background: #363A46;
            height: 20px;
            border-radius: 0px 0px 0px 0px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .addDigitalAssistantDialogTitle {
                display: flex;
                align-items: center;
            }

            .addDigitalAssistantDialogTitleText {
                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .addDigitalAssistantDialogContent {
            :deep(.el-form-item__label) {
                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            :deep(.el-input__wrapper) {
                background: #121318;
            }

            .description {
                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #616772;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .formSwitch {
                :deep(.el-form-item) {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .el-form-item__label {
                        line-height: 26px;
                    }

                    .el-form-item__content {
                        display: flex;
                        justify-content: flex-end;
                    }
                }
            }
        }

        .settingOptions {
            width: 100%;
            margin-top: 20px;

            .settingRadioGroup {
                margin: 0 auto;
                display: flex;
                justify-content: center;

                :deep(.el-radio-button__inner) {
                    width: 200px;
                    background: #262932;
                    border: none;
                }
            }
        }

        .settingDivideLine {
            width: 100%;
            height: 0px;
            border: 1px solid #595c61;
        }

        .formItemTitle {
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .formItemTip {
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .commonSettingButton {
            margin-top: 10px;
            width: 100%;
            background: #41444e;
            border: none;
        }
    }
}
</style>
